<template>
  <!-- 管理员首页 -->
  <div class="home" style="height: 100%">
    <el-row :gutter="20" style="height: 70%">
      <el-col :span="16" style="height: 100%">
        <div class="grid-content bg-purple" style="height: 100%">
          <!-- 左上盒子 -->
          <div class="left-top" style="height: 100%">
            <!-- 左上盒子的上部分 -->
            <ul class="lefttop-head" style="height: 25%">
              <li>
                <i class="iconfont icon-huiyuanguanli1"></i>
                <div class="box">
                  <span>会员总量</span>
                  <span class="data">{{ count.vip }}</span>
                </div>
              </li>
              <li>
                <i class="iconfont el-icon-goods"></i>
                <div class="box">
                  <span>商品总量</span>
                  <!-- <span class="data">{{ goodsCount }}</span> -->
                  <span class="data">{{ count.goods }}</span>
                </div>
              </li>

              <li>
                <i class="iconfont icon-duorenyonghu"></i>
                <div class="box">
                  <span>供应商总数</span>
                  <span class="data">{{ count.supplier }}</span>
                </div>
              </li>

              <li>
                <i class="iconfont icon-gongyingshangguanli"></i>
                <div class="box">
                  <span>员工总数</span>
                  <!-- <span class="data">{{ employeeCount }}</span> -->
                  <span class="data">{{ count.staff }}</span>
                </div>
              </li>
            </ul>

            <!-- 左上盒子的下部分 主要的渐变堆叠面积图-季度销售额曲线图-->
            <div class="lefttop-bottom">
              <div id="main-line" style="width: 100%; height: 95%"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="height: 100%">
        <div class="grid-content bg-purple" style="height: 100%">
          <!-- 右上盒子 -->
          <div class="right-top" style="height: 100%">
            <!-- 右上盒子的上部分 -->
            <ul class="righttop-head">
              <li>
                <div class="icon">
                  <i class="iconfont icon-gongziguanli"></i>
                </div>
                <h2>${{ todaySell.profit }}</h2>
                <h3>今日收益</h3>
              </li>
              <li>
                <div class="icon">
                  <i class="iconfont icon-gongziguanli"></i>
                </div>
                <h2>${{ todaySell.sales }}</h2>
                <h3>今日销售总额</h3>
              </li>
            </ul>
            <!-- 右上盒子的下部分 柱状图-->
            <div class="righttop-bottom">
              <div id="bar" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="height: 30%">
      <el-col :span="9" style="height: 100%">
        <div class="grid-content bg-purple" style="height: 100%">
          <!-- 左下盒子 饼状图 -->
          <div class="left-bottom" id="pie"></div>
        </div>
      </el-col>
      <el-col :span="15" >
        <div class="grid-content bg-purple">
          <!-- 右下盒子 -->
          <div class="right-bottom">
            <h2 style="padding: 10px">
              库存警示
              <el-tooltip
                class="item"
                effect="dark"
                content="商品数量"
                placement="top"
              >
                <i
                  class="iconfont icon-jingshi"
                  style="color: rgba(231, 64, 50, 0.8)"
                  @click="alarmDialog = true"
                ></i>
              </el-tooltip>

              <el-dialog
                title="修改库存警示数量"
                :visible.sync="alarmDialog"
                center
                width="20%"
              >
                <el-input
                  v-model="alarmNum"
                  placeholder="请输入最低数量"
                  width="100px"
                ></el-input>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="alarmDialog = false">取 消</el-button>
                  <el-button type="primary" @click="getInventoryAlarm"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </h2>
            <el-table
              :data="lackGoods"
              style="width: 95%; margin: 0 20px; height: 75%"
              stripe
            >
              <el-table-column prop="supplier_name" label="供应商" width="180">
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="180">
              </el-table-column>
              <el-table-column
                prop="goods_type_name"
                label="商品类型"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="inventory" label="库存"> 
                <template slot-scope="scope">
              <el-tag disable-transitions type="danger">{{ scope.row.inventory }}</el-tag>
            </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getCount,
  getSellMonth,
  getSellWeek,
  inventoryAlarm,
  getSellToday,
} from "@/api/common";
export default {
  data() {
    return {
      count: {
        vip: 0,
        goods: 0,
        supplier: 0,
        staff: 0,
      },
      lackGoods: [],
      alarmNum: 50,
      todaySell: {
        profit: "",
        sales: "",
      },
      weekSell: {},
      monthSell: {},
      alarmDialog: false,
    };
  },
  methods: {
    getInventoryAlarm() {
      this.alarmDialog = false;
      inventoryAlarm(this.alarmNum).then((res) => {
        this.lackGoods = res;
      });
    },

    myEcharts() {
      //饼状图
      var pie = this.$echarts.init(document.getElementById("pie"));
      //配置图表
      var option = {
        title: {
          text: "销量占比",
          // subtext: "Fake Data",
          left: 10,
          top: 10,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: 80,
          top: 50,
        },
        series: [
          {
            name: "销量比例",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            center: ["35%", "55%"],
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "left",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "水果之家" },
              { value: 735, name: "康师傅" },
              { value: 580, name: "统一" },
              { value: 484, name: "旺仔" },
            ],
          },
        ],
        color: [
          "#436de1",
          "#6fcafa",
          "#1ae1e5",
          "#19d9b4",
          "#6b95ea",
          "#61acf3",
        ],
      };
      pie.setOption(option);

      //主要的折线图 main-line 渐变堆叠面积图
      var main_line = this.$echarts.init(document.getElementById("main-line"));
      var option = {
        color: ["#51a8f3", "#01fecd"],
        title: {
          text: "季度销售额曲线变化",
          top: 10,
          left: 10,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#d7dff8",
            },
          },
        },
        legend: {
          top: 10,
        },
        toolbox: {
          top: 5,
          right: 25,
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总利润",
            type: "line",
            stack: "Total",
            smooth: true,

            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(62, 99, 223)",
                },
                {
                  offset: 1,
                  color: "rgb(255,255,255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              this.monthSell.January.total_purchase,
              this.monthSell.February.total_purchase,
              this.monthSell.March.total_purchase,
              this.monthSell.April.total_purchase,
              this.monthSell.May.total_purchase,
              this.monthSell.June.total_purchase,
              this.monthSell.July.total_purchase,
              this.monthSell.August.total_purchase,
              this.monthSell.September.total_purchase,
              this.monthSell.October.total_purchase,
              this.monthSell.November.total_purchase,
              this.monthSell.December.total_purchase,
            ],
          },
          {
            name: "销售总额",
            type: "line",
            stack: "Total1",
            smooth: true,

            showSymbol: false,
            areaStyle: {
              opacity: 0.5,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(10, 254, 208)",
                },
                {
                  offset: 1,
                  color: "rgb(255,255,255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [
              this.monthSell.January.total_price,
              this.monthSell.February.total_price,
              this.monthSell.March.total_price,
              this.monthSell.April.total_price,
              this.monthSell.May.total_price,
              this.monthSell.June.total_price,
              this.monthSell.July.total_price,
              this.monthSell.August.total_price,
              this.monthSell.September.total_price,
              this.monthSell.October.total_price,
              this.monthSell.November.total_price,
              this.monthSell.December.total_price,
            ],
          },
        ],
      };
      main_line.setOption(option);

      //柱状图
      var bar = this.$echarts.init(document.getElementById("bar"));
      option = {
        title: {
          text: "本周销售额",
          top: 10,
          left: 10,
        },
        tooltip: {},
        legend: {
          data: ["利润", "销售额"],
          top: 10,
          right: 60,
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],

        series: [
          {
            type: "bar",
            name: "利润",
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
            data: [
              this.weekSell.Monday.total_purchase,
              this.weekSell.Tuesday.total_purchase,
              this.weekSell.Wednesday.total_purchase,
              this.weekSell.Thursday.total_purchase,
              this.weekSell.Friday.total_purchase,
              this.weekSell.Saturday.total_purchase,
              this.weekSell.Sunday.total_purchase,
            ],
            dataset: {},
            itemStyle: {
              opacity: 0.9,
            },
          },
          {
            type: "bar",
            name: "销售额",
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#8afff2" },
              { offset: 0.5, color: "#1ae1e5" },
              { offset: 1, color: "#1ae1e5" },
            ]),
            data: [
              this.weekSell.Monday.total_price,
              this.weekSell.Tuesday.total_price,
              this.weekSell.Wednesday.total_price,
              this.weekSell.Thursday.total_price,
              this.weekSell.Friday.total_price,
              this.weekSell.Saturday.total_price,
              this.weekSell.Sunday.total_price,
            ],
            itemStyle: {
              opacity: 0.9,
            },
          },
        ],
      };
      bar.setOption(option);
    },
  },
  computed: {},
  mounted() {
    // this.getLackGoods();
    getCount().then((res) => {
      this.count = res;
    });
    getSellToday().then((res) => {
      this.todaySell = res;
    });
    this.getInventoryAlarm();
    getSellWeek().then((res) => {
      this.weekSell = res;
      this.myEcharts();
    });
    getSellMonth().then((res) => {
      this.monthSell = res;
      this.myEcharts();
    });
    
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
ul {
  list-style: none;
}
.left-top {
  margin-left: 10px;
  color: white;
  .lefttop-head {
    display: flex;
    // justify-items: center;
    justify-content: space-around;

    li {
      width: 25%;
      height: 100%;
      margin-left: 30px;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .iconfont {
        line-height: 1.1rem;
        font-size: 40px;
        margin: 0 20px;
      }
      span:nth-child(1) {
        display: inline-block;
        line-height: 18px;
        font-size: 14px;
      }
      .data {
        font-size: 32px;
      }
      .box {
        height: 100%;
        float: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 40px;
      }
    }
    li:nth-child(1) {
      background: #436de1;
      margin-left: 0px;
    }
    li:nth-child(2) {
      background: #6fcafa;
    }
    li:nth-child(3) {
      background: #1ae1e5;
    }
    li:nth-child(4) {
      background: #19d9b4;
    }
  }
  .lefttop-bottom {
    width: 100%;
    height: 70%;
    background-color: white;
    margin-top: 20px;
    border-radius: 2px;
    box-shadow: rgb(233, 232, 232) 2px 2px 8px 0px;
  }
}
.right-top {
  .righttop-head {
    display: flex;
    justify-items: center;
    justify-content: space-around;
    height: 35%;
    li {
      width: 45%;
      height: 100%;
      background-color: white;

      border-radius: 2px;
      box-shadow: rgb(233, 232, 232) 2px 2px 8px 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background: linear-gradient(to bottom, #64b5f5, #436ce2);
        position: relative;
        i {
          position: absolute;
          color: white;
          font-size: 28px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      h2 {
        color: #2a4875;
        line-height: 32px;
        margin-top: 8px;
      }
      h3 {
        color: #acb4c1;
        line-height: 16px;
        font-weight: 400;
      }
    }
    li:nth-child(2) {
      margin-right: 0;
    }
  }
  .righttop-bottom {
    background-color: white;
    width: 97%;
    height: 60%;
    margin-top: 15px;
    border-radius: 2px;
    box-shadow: rgb(233, 232, 232) 2px 2px 8px 0px;
  }
}
.left-bottom {
  background-color: #fff;
  margin-left: 10px;
  width: 100%;
  height: 90%;
  border-radius: 2px;
  box-shadow: rgb(233, 232, 232) 2px 2px 8px 0px;
}
.right-bottom {
  background-color: #fff;
  margin-left: 10px;
  width: 97%;
  height: 90%;
  border-radius: 2px;
  box-shadow: rgb(233, 232, 232) 2px 2px 8px 0px;
}
.el-table{
  height: 140px !important;
  overflow: auto;
}
</style>
